<!DOCTYPE html>
<html>

<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>财务管理</title>
  <!-- Icons-->
  <link href="../vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="../vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="../vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">
  <link href="../vendors/pace-progress/css/pace.min.css" rel="stylesheet">
  <script src="../vendors/echarts/dist/echarts.min.js"></script>
</head>

<body class="app header-fixed sidebar-fixed aside-menu-fixed pace-done sidebar-lg-show">
  <div id="">
    <header class="app-header navbar">
      <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
        <span class="navbar-toggler-icon"></span>
      </button>

      <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="btn-group" role="group" aria-label="Button group">
        <span class="btn"> 你好，无敌的财务人员！管钱管钱管钱</span>
        <a class="btn" href="/api/emp/logout">
          <i class="fa fa-share" aria-hidden="true"></i>退出</a>
      </div>


    </header>
    <div class="app-body">
      <div class="sidebar">
        <nav class="sidebar-nav ps ps--active-y">
          <ul class="nav">
            <br>
            <li class="nav-item nav-dropdown ">
              <a class="nav-link nav-dropdown-toggle" href="#">
                <i class="nav-icon icon-puzzle"></i> 财务管理</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" href="/account/account_orders_check">
                    <i class="nav-icon icon-puzzle"></i>审核订单</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/account/account_orders_count">
                    <i class="nav-icon icon-puzzle"></i>查看业绩</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/account/account_orders_ profit">
                    <i class="nav-icon icon-puzzle"></i>查看利润</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/account/account_orders_history">
                    <i class="nav-icon icon-puzzle"></i>历史采购订单</a>
                </li>

              </ul>
            </li>
            <br><br>
            <li class="nav-item nav-dropdown ">
              <a class="nav-link nav-dropdown-toggle" href="#">
                <i class="nav-icon icon-puzzle"></i> 个人中心</a>
              <ul class="nav-dropdown-items">
                <li class="nav-item">
                  <a class="nav-link" href="/account/account_security">
                    <i class="nav-icon icon-puzzle"></i>账号安全</a>
                </li>
              </ul>
            </li>
          </ul>
          <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
          </div>
          <div class="ps__rail-y" style="top: 0px; height: 445px; right: 0px;">
            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 297px;"></div>
          </div>
        </nav>
        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
      </div>
      <main class="main">
        <!-- Breadcrumb-->
        <ol class="breadcrumb">
          <li class="breadcrumb-item">你的位置：财务管理->查看业绩</li>
          <!-- Breadcrumb Menu-->
          <li class="breadcrumb-menu d-md-down-none">
          </li>
        </ol>

        <div class="center-in-center" style="width:95%;">
          <div class="row">
            <div class="col">
              <div class="card">
                <div class="card">
                  <div class="card-header">
                    <div align="left"> <i aria-hidden="true" class="fa fa-bar-chart"></i>数据可视化</div>
                  </div>
                  <div align="center">
                    <div class="card-body">
                      <div id="main" style="width: 600px;height:400px;"></div>
                      <div id="main1" style="width: 600px;height:400px;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>



      </main>
    </div>
  </div>

  <script src="../vendors/jquery/js/jquery.min.js"></script>
  <script src="../vendors/popper.js/js/popper.min.js"></script>
  <script src="../vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="../vendors/pace-progress/js/pace.min.js"></script>
  <script src="../vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="../vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="../vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script>
  <script src="../vendors/mock.js/js/mock.min.js"></script>
  <script src="../vendors/vue.js/js/vue.min.js"></script>
  <script src="../vendors/echarts/dist/echarts.min.js"></script>
  <script>
    function formatDate(time) {
      var d = new Date(time);
      var time=d.getFullYear() + '年'
      time += d.getMonth()+1 + "月";
      return time
    }

  </script>
  <script>
    var p, d, j;
    var app;
    var items;
    var creatTimeList = []//新建一个数组
    var takeInPriceList = []//新建一个数组
    var earnMoneyeList = []//新建一个数组
    var creatTimeList1 = []//新建一个数组
    var takeInPriceList1 = []//新建一个数组
    var earnMoneyeList1 = []//新建一个数组
    $(function () {

      $.getJSON("/account/earnMonthAccount", function (response) {
        items = response.data;
        // 在线图表
        for (var i = 0; i < items.length; i++) {
          creatTimeList[i] = formatDate(items[i].createTime.toString().split("T")[0]);
          takeInPriceList[i] = items[i].takeInPrice;
          earnMoneyeList[i] = items[i].earnMoney;
        }
      })
      $.getJSON("/account/earnAccount", function (response) {
        items = response.data;

        for (var i = 0; i < items.length; i++) {
          creatTimeList1[i] = items[i].createTime.toString().split("T")[0];
          takeInPriceList1[i] = items[i].takeInPrice;
          earnMoneyeList1[i] = items[i].earnMoney;
        }
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['成本', '利润']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisLabel:{
                interval:0,
                rotate:45,
                margin:2 },
              data: creatTimeList1
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [

            {
              name: '利润',
              type: 'bar',
              stack: '广告',
              data: takeInPriceList1
            },
            {
              name: '成本',
              type: 'bar',
              stack: '广告',
              data: earnMoneyeList1
            }
          ]
        };

        myChart.setOption(option);
        var myChart = echarts.init(document.getElementById('main1'));
        option = {
          title: {
            text: '堆叠区域图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['成本', '利润']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel:{
                interval:0,
                rotate:90,
                margin:3 },
              data: creatTimeList
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '利润',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              data: takeInPriceList
            },
            {
              name: '成本',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              data: earnMoneyeList
            }
          ]
        };

        myChart.setOption(option);
        page = Math.ceil(items.length / 5);
        var pageitem = [];
        for (var i = 0; i < page; i++) {
          pageitem[i] = i + 1;
        }
        app = new Vue({
          el: '#itemsTemplate',
          data: {
            items: items,
            checkall: false,
            pagesum: page,//总页码
            pageindex: 1,//当前页码
            pagesize: 5, //页面数据个数
            pageitem: pageitem,
            editIndex: -1,
            edititems: { name: null },
            keyword: ""

          },
          computed: {
            pageItems: function () {
              var startIndex = (this.pageindex - 1) * this.pagesize;
              var editIndex = startIndex + this.pagesize - 1;
              return this.items.filter(function (value, index) {
                return (
                  index >= startIndex &&
                  index <= editIndex
                );
              });
            }
          },
          methods: {
            cha: function () {

              if (this.keyword === "") {
                for (var i = 0; i < items.length; i++) {
                  dataList[i] = items[i].empName;
                  dataLi[i] = items[i].empResults;

                }
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    data: ['业绩']
                  },
                  xAxis: [
                    {
                      type: 'category',
                      data: dataList
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value',
                      name: '业绩统计',

                    }
                  ],
                  series: [

                    {
                      name: '业绩',
                      type: 'bar',
                      itemStyle: {  /*设置折线颜色*/
                        normal: {
                          color: '#3299CC'
                        }
                      },
                      data: dataLi
                    },
                    {
                      name: '折线',
                      type: 'line',
                      data: dataLi
                    }
                  ]
                };
                //
                myChart.setOption(option);
              } else {
                $.ajax({
                  url: "/api/searchResults/" + this.keyword,
                  type: "get",
                  success: function (res) {
                    var dataList = [];
                    var dataLi = [];
                    console.log(res)
                    for (let key in res.data.empCountList) {
                      dataList.push(key)
                      dataLi.push(res.data.empCountList[key])
                      console.log(key + '---' + res.data.empCountList[key])
                    }
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                      tooltip: {
                        trigger: 'axis'
                      },
                      legend: {
                        data: ['业绩']
                      },
                      xAxis: [
                        {
                          type: 'category',
                          data: dataList
                        }
                      ],
                      yAxis: [
                        {
                          type: 'value',
                          name: '业绩统计',

                        }
                      ],
                      series: [

                        {
                          name: '业绩',
                          type: 'bar',
                          itemStyle: {  /*设置折线颜色*/
                            normal: {
                              color: '#3299CC'
                            }
                          },
                          data: dataLi
                        },
                        {
                          name: '折线',
                          type: 'line',
                          data: dataLi
                        }
                      ]
                    };
                    //
                    myChart.setOption(option);
                  },
                  error: function (xhr, status, error) {
                    $('#issue').modal('show');
                  }
                });
              }
            },
            //页数
            switch: function (x) {
              $('.pagination li').removeClass('active');
              x.parentNode.className = "page-item active";
              this.pageindex = parseInt(x.innerHTML);
            },
            //首页
            first: function () {
              if (this.pageindex != 1) {
                this.pageindex = 1;
              }
              this.$nextTick(function () {
                $('.pagination li').removeClass('active');
                var pidx = String(this.pageindex);
                var li = document.getElementsByClassName("page-item");
                for (var i = 0; i < li.length; i++) {
                  if (li[i].childNodes[0].innerHTML === pidx) {
                    li[i].className = "page-item active";
                    break;
                  }
                }

              })
            },
            //末页
            lastone: function () {
              if (this.pageindex != this.pagesum) {
                this.pageindex = this.pagesum;
              }
              this.$nextTick(function () {
                $('.pagination li').removeClass('active');
                var pidx = String(this.pageindex);
                var li = document.getElementsByClassName("page-item");
                for (var i = 0; i < li.length; i++) {
                  if (li[i].childNodes[0].innerHTML === pidx) {
                    li[i].className = "page-item active";
                    break;
                  }
                }
              })
            },
            //上一页
            last: function () {
              if (this.pageindex != 1) {
                this.pageindex--;
              }
              this.$nextTick(function () {
                $('.pagination li').removeClass('active');
                var pidx = String(this.pageindex);
                var li = document.getElementsByClassName("page-item");
                for (var i = 0; i < li.length; i++) {
                  if (li[i].childNodes[0].innerHTML === pidx) {
                    li[i].className = "page-item active";
                    break;
                  }
                }
              })

            },
            //下一页
            Next: function () {
              if (this.pageindex != app.pagesum) {
                this.pageindex++;
              }

              this.$nextTick(function () {
                $('.pagination li').removeClass('active');
                var pidx = String(this.pageindex);
                var li = document.getElementsByClassName("page-item");
                for (var i = 0; i < li.length; i++) {
                  if (li[i].childNodes[0].innerHTML === pidx) {
                    li[i].className = "page-item active";
                    break;
                  }
                }

              })

            },
            //跳转页数
            jume: function () {
              var page = document.getElementById('page_1').value;
              reg = /^\d+$/
              if (page.length == 0) {
                alert("请输入跳转页码");
                return;
              } else if (page < 1 || page > app.pagesum) {
                alert("您输入的页码超过页数范围了！");
                return;
              } else if (reg.test(page) != true) {
                alert("请输入数字！");
                return;
              }
              this.pageindex = parseInt(page);
              page = "";
              this.$nextTick(function () {
                $('.pagination li').removeClass('active');
                var pidx = String(this.pageindex);
                var li = document.getElementsByClassName("page-item");
                for (var i = 0; i < li.length; i++) {
                  if (li[i].childNodes[0].innerHTML === pidx) {
                    li[i].className = "page-item active";
                    break;

                  }

                }
              })
            }
          }
        });
      });
    });

  </script>
</body>

</html>